<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax测试</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
</head>
<body>
	姓名:<input type="text" name="name">
	<input type="button" value='查询'>
	<input type="button" value='重置'>
	<!--
	1 启动服务器软件apache
	  sudo apachectl start
	
	2 通过终端进入到/etc/apache2/ 回车进入目录
	  cd /etc/apache2/ 
	
	3 通过cp命令拷贝一个配置文件 (httpd.conf) 
	  sudo cp httpd.conf   httpd.conf.back
	
	4 通过ls查看当前目录的文件
	  ls
	
	5 通过vi命令打开文件
      sudo vi httpd.conf
	
	6 输入斜杠然后在斜杠后边写关键词
      /DocumentRoot
    
    7 切换输入法英文模式,然后点击i字母(小心  小心  小心)
    
    8 通过上下左右键来改变光标的位置到要修改的地方
    把 DocumentRoot "/Library/WebServer/Documents" 改成:
      DocumentRoot "/Users/qingyun/php"
	  <Directory "/Users/qingyun/php">
	
	9 修改完成以后点击左上角 esc(一下就可以)
	
	10 输入: 在输入wq(w保存 q退出 !强制).如果改错了直接输入:q! 回车
	
	11 重启服务器apache
		sudo apachectl restart
	-->
	<script>
		//val()可以设置或者获取input的value值
		//var name = $(':text:first').val();
		//console.log(name);

		//查询按钮添加点击事件
		$(':button:first').click(function(){
			//获取姓名
			var name = $('input:first').val();
			if(name == ''){
				alert('请填写要查询的姓名!');
				//通过focus事件把鼠标聚焦到姓名input
				$('input:first').focus();
				//返回结果,结束程序运行
				return false;
			}
			$.ajax({
				url:"/PHP1803/jQuery/ajax01.php",
				type:'get',
				async:false,
				data:"name="+name,
				dateType:'html',
				error:function(xhr,textStatus,error){
					console.log(textStatus);
				},
				success:function(data){
					if(data == '成功'){
						alert('已查到!');
					}else{
						alert(data);
					}
				}
			});
		});
		//重置按钮添加一个点击事件
		$(':button:last').click(function(){
			//清空姓名(input)的值
			$('input:first').val('');
		});
		/*$.ajax({
			//ajax请求的地址
			url:"http://localhost/PHP1803/jQuery/ajax01.php",
			//设置同步(false)或者异步(true),默认 true 
			type:'get',
			async:false,
			//向请求网址传参
			data:{id:12},
			//要求网址返回内容的格式
			dataType:'html',
			//当ajax发生错误的时候触发的回调函数
			error:function(xhr,textStatus,error){
				alert(11);
				console.log(textStatus);
			},
			//当ajax成功的时候触发的回调函数
			success:function(data){
				alert(22);
				console.log(data);
			}
		});*/
	</script>
</body>
</html>